<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
<%@ taglib prefix="decorator" uri="http://claudiushauptmann.com/jsp-decorator/"%>
<%@ page import="vn.fpt.fsoft.entity.User" %>

<decorator:decorate filename="MasterPage.jsp">
    <decorator:content placeholder="title">Amend Trust Region</decorator:content>
    <decorator:content placeholder="head">
<link href="css/style-1.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="css/jq.css" type="text/css"
    media="print, projection, screen" />
<link rel="stylesheet" href="css/style.css" type="text/css"
    media="print, projection, screen" />
<link rel="stylesheet" href="css/bootstrap.min.css" type="text/css"
    media="print, projection, screen" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<script type="text/javascript" src="js/jquery.tablesorter.js"></script>
<script type="text/javascript" src="js/jquery.tablesorter.pager.js"></script>
<script type="text/javascript" src="js/docs.js"></script>
<script type="text/javascript" src="http://getbootstrap.com/dist/js/bootstrap.min.js"></script>
<script type="text/javascript" src="http://bootboxjs.com/bootbox.js"></script>
<script>
    function goBack() {
        window.location.replace("ListTrustRegion.jsp");
    }
    function isValidate() {
        var name = $("#name").val();
        if (name == "") {
            return false;
        } else {
            return true;
        }
    }
    function markInActive() {
    	var regionID = $("#regionID").val();
    	$.ajax({
            url:"TrustRegionController?action=markInActive&regionID=" + regionID,
            type: "POST",
            success:function(data) {
            	$("#name").val("");
	  			$("#name").css("border-color", "");
	  			$("#invalid").css("color","green");
      			$("#invalid").html(data);
            },
            error:function(data){
                alert("fail");
            }
        });
    }
    function saveTrustRegion() {
    	if(isValidate()) {
            bootbox.confirm("Are you sure you  want to save it?", function(result) {
                if(result == true) {
                	var regionID = $("#regionID").val();
                    var countryID = $("#country option:selected").val();
                    var countryName = $("#country option:selected").text();
                    var name = $("#name").val();
                    var description = $("#description").val();
                    $("#invalid").html("");
                    $.ajax({
                        url:"TrustRegionController?action=amendTrustRegion&countryid=" + countryID 
                                + "&countryname=" 
                                + countryName + "&name=" + name 
                                + "&description=" + description
                                + "&regionID=" + regionID,
                        type: "POST",
                        success:function(data) {
                        	$("#name").val("");
            	  			$("#name").css("border-color", "");
            	  			if (data == "Success!!!") {
            	  				$("#invalid").css("color","green");
            	  			} else {
            	  				$("#invalid").css("color","red");
            	  			}
                  			$("#invalid").html(data);
                        },
                        error:function(data){
                            alert("fail");
                        }
                    });
            } else {
                $("#invalid").html("");
                $("#name").val("");
                $("#description").val("");
                $("#name").focus();
            }
        });
    } else {
        $("#name").css("border-color", "red");
        $("#invalid").css("color","red");
        $("#invalid").html("Trust Region Name can not null");
    }
    }
    $(document).ready(function() {
        $("#tabs").tabs();
            $.ajax({
                url : "TrustRegionController?action=getData&regionID="+<%=request.getParameter("regionID") %>,
                type : "POST",
                success : function(data) {
                    var obj = JSON.parse(data);
                    $("#country").val(obj.CountryName);
                    $("#name").val(obj.Name);
                    $("#description").val(obj.Descript);
                },
                error : function(data) {
                    alert("fail");
                }
            });
    });
    
    /*List trust districts*/
    function updateDistrict(districtID,active) {
     if(active) {
    	 bootbox.dialog({
             message : "Do you want to update this Trust District?",
             buttons : {
                 upadate : {
                     label : "Update",
                     className : "btn-upadte",
                     callback : function() {
                         window.location
                         .replace("AmendTrustDistrict.jsp?districtID="+ districtID+"&regionID="+<%=request.getParameter("regionID")%>);
                     }
                 },
                 cancel : {
                     label : "Cancel",
                     className : "btn-cancel",
                 }
             }
         });
     } else {
    	 bootbox.confirm("Do you want to make this Trust District active?", 
                 function(result) {
                     if(result) {
                     var check = $("#checkActive").prop("checked");
                     check = (check == true) ? 1 : 0;
                     $.ajax({
                   url:"GetListTrustDistrict?action=active&districtID="+districtID 
                           + "&checked=" + check
                           +"&regionId="+<%=request.getParameter("regionID")%>,
                   type: "GET",
                   success:function(data) {
                      load(data);
                   },
                   error:function(data){
             
                 }
              });
         }
     })
     }
        
    }
    $(document).ready(
            function() {
                $("#tabs").tabs();
                $("li.filter a").click(
                        function() {
                            var filter = $(this).attr("id");
                            var check = $("#checkActive").prop("checked");
                            check = (check == true) ? 1 : 0;
                            var regionID = $("#regionID").val();
                            $.ajax({
                                url : "GetListTrustDistrict?filter=" + filter
                                        + "&checked=" + check+"&regionId="+regionID,
                                type : "POST",
                                success : function(data) {
                                    load(data);
                                },
                                error : function(data) {
                                    //alert("fail a");
                                }
                            });

                        });
                $("#checkActive").click(function() {
                    var check = $("#checkActive").prop("checked");
                    check = (check == true) ? 1 : 0;
                    var regionID = $("#regionID").val();
                        $.ajax({
                            url : "GetListTrustDistrict?checked="+check+"&regionId="+regionID,
                            type : "POST",
                            success : function(data) {
                                load(data);
                            },
                            error : function(data) {
                                alert("fail chk");
                            }
                        });
                });

            });
    $(window).load(function() {
    	$.ajax({
            url:"TrustRegionController?action=getdata",
            type: "GET",
            success:function(data) {
               $("select").append(data);
            },
            error:function(data){
                alert("fail");
            }
         });
        $("#tabs").tabs();
        $.ajax({
            url : "GetListTrustDistrict?checked=0"
                    +"&regionId="+<%=request.getParameter("regionID")%>,
            type : "POST",
            success : function(data) {
                load(data);
            },
            error : function(data) {
                alert("Loading data fails");
            }
        });
    });
    function load(data) {
        var data1 = JSON.parse(data);
        var length = data1.TrustDistricts.length;
        var result = "<table cellspacing=1 class=\"tablesorter\" id=\"table\">";
        result += "<thead>";
        result += "<tr>";
        result += "<th>Trust District Name</th>";
        result += "<th>Description</th>";
        result += "<th>Region Name</th>";
        result += "<th>Is Active?</th>";
        result += "</tr>";
        result += "</thead>";
        result += "<tbody>";
        for (var i = 0; i < length; i++) {
            districtID =data1.TrustDistricts[i].TrustDistrictId;
            districtName =data1.TrustDistricts[i].Name;
            description = data1.TrustDistricts[i].Description;
            regionName = data1.TrustDistricts[i].RegionName;    
            active = data1.TrustDistricts[i].IsActive;
            
            result += "<tr onclick='updateDistrict("+districtID+ "," +active+")'>";
            result += "<td id="+ districtID +">";
            result += districtName + "</td>";
            result += "<td>" + description + "</td>";
            result += "<td>" + regionName + "</td>";
            if (active) {
                result += "<td>Yes</td>";
            } else {
                result += "<td>No</td>";
            }
            result += "</tr>";
        }
        result += "</tbody>";
        result += "</table>";

        result += "<div id=pager class=pager style=right:5px;float:right;>";
        result += "<form>";
        result += "<img src=img/first.png class=first />";
        result += "<img src=img/prev.png class=prev />";
        result += " <input type=text class=pagedisplay size=5 />";
        result += "<img src=img/next.png class=next />";
        result += "<img src=img/last.png class=last />";
        result += "<select class=pagesize style=visibility:hidden;>";
        result += "<option selected=selected  value=15></option>";
        result += "</select>";
        result += "</form>";
        result += "</div>";
        $("#datatable").empty();     
        $("#datatable").append(result);
        $("#table").tablesorter({
            widthFixed : true,
            widgets : [ 'zebra' ]
        }).tablesorterPager({
            container : $("#pager")
        });
        $("#pager").css("position", "static");
    }

    function openCreate() {
        window.location.replace("AddTrustDistrict.jsp?"+"regionID="+<%=request.getParameter("regionID")%>);
    }
</script>
</decorator:content>


<decorator:content placeholder="body">
	<%
		User user = (User) request.getSession().getAttribute("user");
		if(user == null) {
		    response.sendRedirect("login.jsp");
		}
	%>
    <p style="color: #0C3; font-size: 24px; font-weight: bold;">Trust Region Details</p>
    <div id="tabs" style="width: 795px; height: 100%">
        <ul>
            <li><a href="#detail1" id="tab1">Detail</a></li>
            <li><a href="#detail2" id="tab2">Trust Districts</a></li>
            <li style="float: right">
                <input type="button" id="btnInActive" value="In-active "
                    onclick="markInActive();" /> &nbsp;&nbsp;
                <input type="button" id="btnSave" value="Save"
                    onclick="saveTrustRegion();" /> &nbsp;&nbsp; 
                <input type="button"
                    value="Back" onclick="goBack();" />
            </li>
        </ul>
        <div id="detail1" style="background-color: #EFEFEF;">
            <table style="width: 703px;">
                <tr>
                    <td width="206">Nation/Conutry&nbsp;&nbsp;&nbsp;&nbsp;
                        <label style="color: red;">*</label>
                    </td>
                    <td width="481"><select id="country" style="width:35%;height:20px;"></select></td>
                </tr>
                <tr>
                    <td height="64">Trust Region Name&nbsp;&nbsp;&nbsp;&nbsp;<label
                        style="color: red;">*</label></td>
                    <td>
                        <input id="name" type="text" size="30"/>
                        <input id="regionID" type="hidden" name="regionID" value="<%=request.getParameter("regionID") %>"></input>
                    </td>
                </tr>
                <tr>
                    <td>Description</td>
                    <td><textarea id="description" rows="4" cols="30"></textarea></td>
                </tr>
            </table>
            <br /> <br /> <br />
            <p id="invalid" style="color: #F00; font-size: 14px"></p>
        </div>

        <div id="detail2">
            <div id="manager_nav">
            <ul style = "font-size: 12px;">
                <li class='filter'><a href="#" id="all">All</a></li>
                <li>|</li>
                <li class='filter'><a href="#" id="digital">0 - 9</a></li>
                <li>|</li>
                <li class='filter'><a href="#" id="ae">A B C D E</a></li>
                <li class='filter'>|</li>
                <li class='filter'><a href="#" id="fj">F G H I J</a></li>
                <li>|</li>
                <li class='filter'><a href="#" id="kn">K L M N</a></li>
                <li>|</li>
                <li class='filter'><a href="#" id="or">O P Q R</a></li>
                <li>|</li>
                <li class='filter'><a href="#" id="sv">S T U V</a></li>
                <li>|</li>
                <li class='filter'><a href="#" id="wz">W X Y Z</a></li>
            </ul>
            </div>
            <div id="manager_action">
                <a href="#" style="text-decoration: none"> <input type="button"
                    class="btn-default" value="Create" onclick="openCreate();" />
                </a>&nbsp; <input type="checkbox" id="checkActive"/><span style="color: gray; font-weight:bold;"> Include in-active</span>
            </div>
            <br/>
            <div id="datatable"></div>
        </div>
    </div>
</decorator:content>
</decorator:decorate>
